<template>
  <div class="app-container">
    <el-card shadow="never">
      <div slot="header">
        <span>新增资讯</span>
      </div>

      <el-form :model="announcement" :rules="rules" ref="announcementForm" label-width="120px">
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="announcement.title" placeholder="请输入文章标题" style="width: 500px;"></el-input>
        </el-form-item>

        <el-form-item label="文章内容" prop="content">
          <quill-editor v-model="announcement.content" :options="editorOption"
            style="height: 400px; margin-bottom: 50px;">
          </quill-editor>
        </el-form-item>

        <el-form-item label="外链链接" prop="external_link">
          <el-input v-model="announcement.external_link" placeholder="请输入外链链接URL" style="width: 500px;"></el-input>
        </el-form-item>

        <el-form-item label="上架状态">
          <el-switch v-model="announcement.is_published" active-text="已上架" :active-value="1"
            :inactive-value="0" style="float: right;">
          </el-switch>
        </el-form-item>

        <el-form-item label="是否置顶">
          <el-switch v-model="announcement.is_pinned" active-text="已置顶" :active-value="1"
            :inactive-value="0" style="float: right;">
          </el-switch>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleSubmit" :loading="submitLoading">保存</el-button>
          <el-button @click="handleCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { createAnnouncement, getAnnouncement, updateAnnouncement, uploadImage } from '@/api/content'

import { quillEditor } from 'vue-quill-editor'

export default {
  name: 'announcementEdit',
  components: {
    quillEditor
  },
  data() {
    return {
      announcement: {
        title: '',
        content: '',
        external_link: '',
        is_published: 1,
        is_pinned: 0
      },
      rules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' }
        ],
        external_link: [
          {
            validator: (rule, value, callback) => {
              if (!value) {
                callback();
              } else {
                // URL格式校验
                const urlReg = /^(https?:\/\/)?([\da-z.-]+)(\.[a-z.]{2,})?(:\d+)?([\/\w .\-=#?&]*)*\/?$/;
                if (urlReg.test(value)) {
                  callback();
                } else {
                  callback(new Error('请输入有效的URL链接'));
                }
              }
            },
            trigger: 'blur'
          }
        ]
      },
      submitLoading: false,
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            [{ 'header': 1 }, { 'header': 2 }],
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            [{ 'indent': '-1' }, { 'indent': '+1' }],
            [{ 'size': ['small', false, 'large', 'huge'] }],
            [{ 'color': [] }, { 'background': [] }],
            [{ 'align': [] }],
            ['link', 'image'],
            ['clean']
          ]
        },
        placeholder: '请输入文章内容...'
      }
    }
  },
  created() {
    const id = this.$route.params.id
    if (id) {
      this.getAnnouncementDetail(id)
    }
  },
  methods: {
    getAnnouncementDetail(id) {
      getAnnouncement(id).then(response => {
        this.announcement = response.data
      })
    },
    handleSubmit() {
      this.$refs.announcementForm.validate(valid => {
        if (valid) {
          this.submitLoading = true
          const id = this.$route.params.id
          const request = id
            ? updateAnnouncement(id, this.announcement)
            : createAnnouncement(this.announcement)

          request.then(() => {
            this.submitLoading = false
            this.$message.success(id ? '更新成功' : '创建成功')
            this.$router.push('/content/announcement/list')
          }).catch(() => {
            this.submitLoading = false
          })
        }
      })
    },
    handleCancel() {
      this.$router.back()
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}
</style>
